<template>
  <div class="shenpi">
      <!-- 面包絮 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
        <el-breadcrumb-item>转正管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索栏 -->
    <div class="head">
        <el-form :model="ruleForm" 
        :rules="rules"
        ref="ruleFormRef"
        status-icon
        >
            <!-- <el-form-item label=""  prop="shenqingshijian">
                <el-date-picker
                v-model="ruleForm.shenqingshijian"
                type="date"
                placeholder="请选择申请时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>  -->
              <el-form-item label=""  prop="bumen">
                <el-select v-model="ruleForm.bumen"  placeholder="请选择部门">
                    <el-option label="项目部" value="项目部" />
                    <el-option label="产品部" value="产品部" />
                    <el-option label="人力资源部" value="人力资源部" />
                    <el-option label="财务部" value="财务部" />
                    <el-option label="行政部" value="行政部" />
                </el-select>
              </el-form-item>
              <el-form-item label=""  prop="shenhezhuangtai">
                <el-select v-model="ruleForm.shenhezhuangtai" placeholder="请选择审批状态">
                  <el-option label="待审批" value="待审批" />
                  <el-option label="已审批" value="已审批" />
                  <el-option label="审批中" value="审批中" />
                </el-select>
              </el-form-item>
              <el-form-item label=""  prop="shenqinglaixing">
                <el-select v-model="ruleForm.shenqinglaixing" placeholder="请选择申请类型">
                  <el-option label="补卡申请" value="补卡申请" />
                  <el-option label="加班申请" value="加班申请" />
                </el-select>
              </el-form-item>
              
            <el-form-item>
              <el-button type="primary" @click="chaxun()">查询</el-button>
              <el-button @click="chongzhi()">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
    <div class="nav">
          <el-tabs :data="tableData" stripe style="width: 100%">
            <!-- 全部 -->
        <el-tab-pane label="全部">
            <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading...">
                <el-table-column  prop="date" label="序号" width="80" type="index" />
                <el-table-column  prop="liushuihao" label="流水号" />
                <el-table-column prop="name" label="姓名"  />
                <el-table-column prop="bumen" label="部门"  />
                <el-table-column prop="shenqingshijian" label="申请时间"  />
                <el-table-column prop="shenqinglaixing" label="申请类型"  />
                <el-table-column prop="shenhezhuangtai" label="审批状态"  />
                <el-table-column prop="shenpiren" label="审批人"  />
                <el-table-column prop="shenpiyijian" label="审批意见" width="120" />
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="look(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <!-- 待办 -->
        <el-tab-pane label="待办">
            <el-table :data="tableData1" style="width: 100%" v-loading="loading" element-loading-text="Loading...">
                <el-table-column  prop="date" label="序号" width="80" type="index" />
                <el-table-column  prop="liushuihao" label="流水号" />
                <el-table-column prop="name" label="姓名"  />
                <el-table-column prop="bumen" label="部门"  />
                <el-table-column prop="shenqingshijian" label="申请时间"  />
                <el-table-column prop="shenqinglaixing" label="申请类型"  />
                <el-table-column prop="shenhezhuangtai" label="审批状态"  />
                <el-table-column prop="shenpiren" label="审批人"  />
                <el-table-column prop="shenpiyijian" label="审批意见" width="120" />
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small"  @click="look(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <!-- 已办 -->
        <el-tab-pane label="已办">
            <el-table :data="tableData2" style="width: 100%" v-loading="loading" element-loading-text="Loading...">
                <el-table-column  prop="date" label="序号" width="80" type="index" />
                <el-table-column  prop="liushuihao" label="流水号" />
                <el-table-column prop="name" label="姓名"  />
                <el-table-column prop="bumen" label="部门"  />
                <el-table-column prop="shenqingshijian" label="申请时间"  />
                <el-table-column prop="shenqinglaixing" label="申请类型"  />
                <el-table-column prop="shenhezhuangtai" label="审批状态"  />
                <el-table-column prop="shenpiren" label="审批人"  />
                <el-table-column prop="shenpiyijian" label="审批意见" width="120" />
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small"  @click="look(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <!-- 办结 -->
        <el-tab-pane label="办结">
            <el-table :data="tableData3" style="width: 100%" v-loading="loading" element-loading-text="Loading...">
                <el-table-column  prop="date" label="序号" width="80" type="index" />
                <el-table-column  prop="liushuihao" label="流水号" />
                <el-table-column prop="name" label="姓名"  />
                <el-table-column prop="bumen" label="部门"  />
                <el-table-column prop="shenqingshijian" label="申请时间"  />
                <el-table-column prop="shenqinglaixing" label="申请类型"  />
                <el-table-column prop="shenhezhuangtai" label="审批状态"  />
                <el-table-column prop="shenpiren" label="审批人"  />
                <el-table-column prop="shenpiyijian" label="审批意见" width="120" />
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="look(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 查看 -->
    <el-drawer v-model="drawer" title="查看" :with-header="false">
      <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="ruleFormRef" status-icon>
        <el-form-item label="流水号" prop="liushuihao">
            <el-input v-model="ruleForm.liushuihao" placeholder="请输入流水号" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" width="200px" placeholder="请输入姓名" :disabled="true" />
        </el-form-item>  
        <el-form-item label="部门" prop="bumen">
            <el-select v-model="ruleForm.bumen" placeholder="请选择部门" :disabled="true">
                <!-- <el-option label="项目部" value="项目部" />
                <el-option label="产品部" value="产品部" />
                <el-option label="人力资源部" value="人力资源部" />
                <el-option label="财务部" value="财务部" />
                <el-option label="行政部" value="行政部" /> -->

            </el-select>
        </el-form-item>
          <el-form-item label="申请时间" prop="shenqingshijian">
            <el-date-picker v-model="ruleForm.shenqingshijian" type="date" placeholder="请选择时间" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" style="width:450px" :disabled="true" />
        </el-form-item>
        <el-form-item label="申请类型" prop="shenqinglaixing">
            <el-select v-model="ruleForm.shenqinglaixing" placeholder="请选择申请类型" :disabled="ruleForm.shenhezhuangtai=='已审批'?true:false">
                <el-option label="补卡申请" value="补卡申请" />
                <el-option label="加班申请" value="加班申请" />
            </el-select>
        </el-form-item>
        <el-form-item label="审批状态" prop="shenhezhuangtai">
            <el-select v-model="ruleForm.shenhezhuangtai" placeholder="请选择工作性质" :disabled="ruleForm.shenhezhuangtai=='已审批'?true:false">
                <el-option label="待审批" value="待审批" />
                <el-option label="审批中" value="审批中" />
                <el-option label="已审批" value="已审批" />
            </el-select>
        </el-form-item>
        <el-form-item label="审批人" prop="shenpiren">
            <el-select v-model="ruleForm.shenpiren" placeholder="请选择状态" :disabled="ruleForm.shenhezhuangtai=='已审批'?true:false">
                <el-option label="韩信" value="韩信" />
                <el-option label="貂蝉" value="貂蝉" />
                <el-option label="卢布" value="卢布" />
                <el-option label="马超" value="马超" />
            </el-select>
        </el-form-item>
        <el-form-item label="审批意见" prop="shenpiyijian">
            <el-select v-model="ruleForm.shenpiyijian" placeholder="请选择状态" :disabled="ruleForm.shenhezhuangtai=='已审批'?true:false">
                <el-option label="同意" value="同意" />
                <el-option label="流水不正确" value="流水不正确" />
            </el-select>
        </el-form-item>
      
        
        <el-form-item>
            <el-button @click="drawer=false">返回</el-button>
            <el-button type="primary" @click="shenpi()" >审批</el-button>
        </el-form-item>
    </el-form>
    </el-drawer>
    <!-- 分页
    <el-pagination background layout="prev, pager, next" :total="1000" /> -->
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import * as request from '@/api/biao/biao'
var drawer=ref(false)
var loading=ref(true)
var ruleFormRef=ref()
var tableData=ref([])
var tableData1=ref([])
var tableData2=ref([])
var tableData3=ref([])
var ruleForm=ref({
    shenqingshijian:'',
    bumen:'',
    shenhezhuangtai:'',
    leixing:'',
    name:'',
    liushuihao:''
})
//数据校验
var rules=ref({
  shenqingshijian: [
    { required: true, message: '请选择申请时间', trigger: 'blur' }, 
  ],
  bumen: [
    { required: true, message: '请选择部门', trigger: 'blur' }, 
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }, 
  ],
  liushuihao: [
    { required: true, message: '请输入流水号', trigger: 'blur' }, 
  ],
  shenhezhuangtai: [
    { required: true, message: '请选择申请状态', trigger: 'blur' }, 
  ],
  shenqinglaixing: [
    { required: true, message: '请选择申请类型', trigger: 'blur' }, 
  ],

})
onMounted(async()=>{
    var res=await request.shenpi_login()
    console.log(res);
    loading.value=false
    tableData.value=res.data
    tableData1.value=res.data.filter(item=>item.shenhezhuangtai=='待审批')
    tableData2.value=res.data.filter(item=>item.shenhezhuangtai=='审批中')
    tableData3.value=res.data.filter(item=>item.shenhezhuangtai=='已审批')
})
//查看
var look=(admin)=>{
  drawer.value=true
  ruleForm.value = admin
}
//修改审批状态
var shenpi=async()=>{
  var res= await request.shenzhuang_login(ruleForm.value)
  console.log(res);
  drawer.value=false
  ElNotification({
      title: "通知",
      message: "审批成功",
      type: "success",
      duration: 2000,
     });
}
//查询
var chaxun=async()=>{
  console.log(ruleForm.value);
  var res=await request.shenpi_login({bumen_like:ruleForm.value.bumen,shenhezhuangtai_like:ruleForm.value.shenhezhuangtai,shenqinglaixing_like:ruleForm.value.shenqinglaixing})
  console.log(res);
  tableData.value=res.data
  tableData1.value=res.data.filter(item=>item.shenhezhuangtai=='待审批')
    tableData2.value=res.data.filter(item=>item.shenhezhuangtai=='审批中')
    tableData3.value=res.data.filter(item=>item.shenhezhuangtai=='已审批')
 
}
//重置
var chongzhi=async()=>{
  var res=await request.shenpi_login()
    console.log(res);
    tableData.value=res.data
    tableData1.value=res.data.filter(item=>item.shenhezhuangtai=='待审批')
    tableData2.value=res.data.filter(item=>item.shenhezhuangtai=='审批中')
    tableData3.value=res.data.filter(item=>item.shenhezhuangtai=='已审批')
    
}
</script>

<style scoped>
.shenpi{
  width: 100%;
}
.head>.el-form{
    display: flex;
}
.el-select{
    width: 150px;
    margin: 0px 10px;
}
.el-breadcrumb{
  margin-bottom: 20px;
}
.el-table{
  margin-top:20px;
}
</style>